<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <title>番信</title>
    <link th:href="@{public/css/bootstrap.css}" rel="stylesheet">
    <script th:src="@{public/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{public/js/bootstrap.js}"></script>
    <script th:src="@{public/js/vue.js}"></script>
</head>
<body>
<div id="cqr" class="container">
    <div class="row">
        <div class="col-md-offset-1 col-md-4">
            <p class="h5 text-center">用户名：[[${user.getUsername()}]]</p>
            <ul class="nav nav-tabs">
                <li class="active"><a>大厅</a> </li>
                <li><a>好友</a> </li>
            </ul>
            <ul class="list-group">
                <li class="list-group-item">公共聊天室</li>
            </ul>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default hidden">
                <div class="panel-heading text-center">{{accepter}}</div>
                <div class="panel-body">
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading text-center">公共聊天室</div>
                <div class="panel-body">
                </div>
            </div>
            <div class="form-group">
                <textarea class="form-control"v-model="message"></textarea>
                <a class="btn btn-default col-lg-offset-11" v-on:click="sendMessage()">发送</a>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    var userId=[[${user.getUsername()}]];
</script>
<script th:src="@{js/tomatochat.js}"></script>
<link th:href="@{css/tomatochat.css}" rel="stylesheet">
</html>
